<template>
  <div>
    <div class="header">
      <div class="go-home">
        <slot></slot>
      </div>
      <div class="flex items-center gap-4">
        <a-dropdown v-if="false">
          <a-button>{{ t('Language') }}</a-button>
          <template #overlay>
            <a-menu>
              <a-menu-item>{{ t('Download translation file') }}</a-menu-item>
              <a-menu-item>{{ t('Update translation file') }}</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
        <div>
          <a-select
            v-model:value="pageStore.$state.lang"
            :options="langOptions"
            style="width: 120px"
            @change="changeLang"
          ></a-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { langOptions } from '@/data/options';
import usePageStore from '@/store/page';

const pageStore = usePageStore();
const { t, locale } = useI18n();
const changeLang = () => {
  localStorage.setItem('lang', pageStore.$state.lang);
  locale.value = pageStore.$state.lang;
};
</script>

<style lang="scss" scoped>
.header {
  @apply flex justify-between p-6;
  .go-home {
    @apply cursor-pointer text-[2rem]  flex items-center gap-4;
  }
}
</style>
